
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>手把手带你应对复杂合并场景 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>手把手带你应对复杂合并场景 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">什么是 Git 冲突？它通常在执行哪两种 Git 操作时发生？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Git 冲突是指当两个分支对同一文件的同一部分进行了不同的修改时，Git 无法自动决定使用哪个版本的情况。它通常发生在合并（Merge）或变基（Rebase）操作中。</div>
          </div>
          <div class="card-source">来源: 1. 什么是 Git 冲突？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">当 Git 冲突发生时，文件中出现的特殊标记符号（如 `<<<<<<< HEAD`、`=======` 和 `>>>>>>>`）分别代表什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在冲突文件中，`<<<<<<< HEAD` 到 `=======` 之间的内容是当前分支的修改；而 `=======` 到 `>>>>>>> [分支名]` 之间的内容是目标分支的修改。</div>
          </div>
          <div class="card-source">来源: 1.2 冲突的表现</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">解决 Git 冲突的基本流程包含哪几个核心步骤？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">解决 Git 冲突的基本流程包括：1. 检测冲突；2. 使用 `git status` 查看冲突文件；3. 手动修改文件解决冲突；4. 使用 `git add` 命令标记冲突已解决；5. 根据操作类型使用 `git commit` (合并) 或 `git rebase --continue` (变基) 来完成。</div>
          </div>
          <div class="card-source">来源: 2. 解决 Git 冲突的基本步骤</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">当二进制文件（如图片、PDF）发生冲突时，文档提供了哪两种解决方案？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 选择其中一个版本：使用 `git checkout --ours <文件路径>` 选择当前分支的版本，或使用 `git checkout --theirs <文件路径>` 选择目标分支的版本。<br>2. 手动替换文件：直接从目标分支将正确的二进制文件复制过来，覆盖当前分支的冲突文件。</div>
          </div>
          <div class="card-source">来源: 3.2 场景 2：二进制文件的冲突</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">如何有效管理和减少长期分支（如 `main` 和 `develop`）之间积累的大量冲突？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档提出了两种方法：1. 频繁合并，定期将一个分支合并到另一个，以减少冲突的积累。2. 使用变基，例如在 `develop` 分支上执行 `git rebase main`，将 `main` 分支的最新更改应用到 `develop` 分支上。</div>
          </div>
          <div class="card-source">来源: 3.3 场景 3：长期分支的冲突</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在解决冲突并使用 `git add` 标记后，根据是合并（Merge）还是变基（Rebase）操作，应该分别使用什么命令来完成流程？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">如果是合并操作，使用 `git commit` 命令完成合并。如果是变基操作，使用 `git rebase --continue` 命令继续变基。</div>
          </div>
          <div class="card-source">来源: 2.5 完成合并或变基</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在多人协作的项目中，可以采用哪些方法来减少冲突的发生？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以采用三种方法：1. 小步提交，将代码拆分为多个小提交，减少每次提交的影响范围。2. 及时拉取最新代码，在开始新任务前先同步远程仓库的最新代码。3. 使用功能开关（Feature Toggle），将未完成的功能隐藏，避免冲突。</div>
          </div>
          <div class="card-source">来源: 3.4 场景 4：多人协作的冲突</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">为了从源头上预防冲突，文档中提到了哪些最佳实践？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档中提到的预防冲突的最佳实践包括：1. 统一代码规范以减少不必要的风格冲突；2. 进行模块化设计以减少多人修改同一文件的可能性；3. 通过代码审查（Code Review）提前发现潜在的冲突。</div>
          </div>
          <div class="card-source">来源: 4.1 预防冲突</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">当项目中出现多个文件冲突时，除了逐个手动解决，还可以使用什么命令来调用可视化工具进行批量解决？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以使用 `git mergetool` 命令来启动 Git 支持的合并工具（如 `meld`、`kdiff3`），从而更高效地批量解决冲突。</div>
          </div>
          <div class="card-source">来源: 3.1 场景 1：多个文件的冲突</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
